import { PureComponent } from 'react';
import moment from 'moment';
import {
    Row,
    Col,
    Form,
    Input,
    InputNumber,
    Select,
    Modal,
    DatePicker,
    Button,
    Cascader
} from 'antd';
const FormItem = Form.Item;
const { Option } = Select;
const formItemLayout = {
 	labelCol: { span: 10 },
   	wrapperCol: { span: 14 },
};

@Form.create()
class UpdateForm extends PureComponent {
	
	constructor(props) {
	    super(props);
	    if(props.values) {
	    	this.state = {
				formVals: {
					id: props.values.id,
            		punid: props.values.punid,
					social_insurance_computer_number: props.values.social_insurance_computer_number,
					accumulation_fund_number: props.values.accumulation_fund_number,
					bank_card_number: props.values.bank_card_number,
					open_bank: props.values.open_bank
				},
		    }
	    }else {
	    	this.state = {
				formVals: {
					social_insurance_computer_number: "",
					accumulation_fund_number: "",
					bank_card_number: "",
					open_bank: ""
				},
		    }
	    }
	}
 	
 	componentWillReceiveProps(nextProps) {
		if(undefined != nextProps.values && nextProps.values !== this.props.values) {
	      this.setState({formVals: nextProps.values});
		}
		
	}


	handleLocalUpdate = (event) => {
			event.preventDefault();
			const { form,handleSubmitAccountInfo } = this.props;
			const { formVals: oldValue } = this.state;
			form.validateFields((err, fieldsValue) => {
				if(err) return;
				form.resetFields();
				const formVals = { 
					...oldValue,
					...fieldsValue
				};
				this.setState({
					formVals,
				});
				handleSubmitAccountInfo(formVals);
	
			});
	};
	
  render() {
    const {form: {getFieldDecorator}, editAccountInfo,cancelEditAccountInfo,cascaderList} = this.props;
    const { formVals } = this.state;
	return (
		<div>
			{editAccountInfo?(
	      		<Form  onSubmit={this.handleLocalUpdate}>
			
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				    
				        <Col md={12} sm={24}>
				          <FormItem  label="社保电脑号">
				              {getFieldDecorator('social_insurance_computer_number', {
				              rules: [{ required: false}],
				              initialValue: formVals.social_insurance_computer_number,
				              })(<Input placeholder="请输入"/>)}
				          </FormItem>
				        </Col>
						
						<Col md={12} sm={24}>
				          <FormItem  label="公积金账号">
				              {getFieldDecorator('accumulation_fund_number', {
				              rules: [{ required: false}],
				              initialValue: formVals.accumulation_fund_number,
				              })(<Input placeholder="请输入"/>)}
				          </FormItem>
				        </Col>
				
				    </Row>
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				    
				        <Col md={12} sm={24}>
				          <FormItem  label="银行卡号">
				              {getFieldDecorator('bank_card_number',{
				              	rules: [{ required: false, message: '银行卡号格式不符', pattern:/^([1-9]{1})(\d{14}|\d{18})$/}],
				              	initialValue: formVals.bank_card_number,
				              })(<InputNumber placeholder="10-20位数字" style={{width: '100%'}}/>)}
				          </FormItem>
				        </Col>
						
				        <Col md={12} sm={24}>
				          <FormItem  label="开户行">
				              {getFieldDecorator('open_bank',{
				              	initialValue: formVals.open_bank,
				              })(<Input placeholder="请具体到支行" />)}
				          </FormItem>
				        </Col>
				
				    </Row>
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				    	<Col md={12} sm={24}>
				    				<Button 
			            	size="large" 
			            	style={{marginRight: '10px'}}
			            	onClick={()=> {
			            		const { form } = this.props;
  								form.resetFields();
			            		cancelEditAccountInfo();
			            	}}>
			            	取消
			           		</Button>
				            <Button size="large" type="primary" htmlType="submit">保存</Button>
				        </Col>
				    </Row>
				
				</Form>
	      	):(			
				<Form  {...formItemLayout}>
				
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				    
				        <Col md={12} sm={24}>
				          <FormItem  label="社保电脑号">
				              {getFieldDecorator('social_insurance_computer_number')(<span>{formVals.social_insurance_computer_number}</span>)}
				          </FormItem>
				        </Col>
						
						<Col md={12} sm={24}>
				          <FormItem  label="公积金账号">
				              {getFieldDecorator('accumulation_fund_number')(<span>{formVals.accumulation_fund_number}</span>)}
				          </FormItem>
				        </Col>
				
				    </Row>
				    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
				    
				        <Col md={12} sm={24}>
				          <FormItem  label="银行卡号">
				              {getFieldDecorator('bank_card_number')(<span>{formVals.bank_card_number}</span>)}
				          </FormItem>
				        </Col>
						
				        <Col md={12} sm={24}>
				          <FormItem  label="开户行">
				              {getFieldDecorator('open_bank')(<span>{formVals.open_bank}</span>)}
				          </FormItem>
				        </Col>
				
				    </Row>
				
				</Form>
	      	)}
	
		</div>
	
				
	);
  }

}

export default UpdateForm;
